<template>
	<view class="container">
		<scroll-view scroll-y="true" enable-back-to-top class="scroll-box">
			<view class="topic-wrap u-p-30">
				<u-form :model="model" :rules="rules" ref="uForm" :errorType="errorType">
					<!--话题分类-->
					<view class="u-m-b-60">
						<u-form-item label="圈子分类" label-width="auto" prop="catename">
							<u-input input-align="right" v-model="model.cate_name" @click="show = true"
								placeholder="请选择" type="select" />
						</u-form-item>
					</view>
					<u-form-item label="圈子名称" label-position="top" prop="topicname">
						<u-input v-model="model.topic_name" />
					</u-form-item>

					<u-form-item label="圈子介绍" label-position="top" :border-bottom="false" prop="description">
						<textarea placeholder="填写圈子介绍" v-model="model.description" class="post-txt"></textarea>
					</u-form-item>
					<u-form-item label="圈子头像" label-position="top" :border-bottom="false" prop="coverimg">
						<u-upload :form-data="formData" :showProgress="false" @on-uploaded="uploadSuccess1"
							@on-remove="uploadRemove1" :action="action" width="140" height="140" maxCount="9">
						</u-upload>
					</u-form-item>
				</u-form>
			</view>

			<!-- 分类选择器 -->
			<u-select v-model="show" value-name='cate_id' label-name='cate_name' mode="single-column" :list="cateList"
				@confirm="confirm"></u-select>
			<u-picker mode="region" v-model="pickerShow" @confirm="regionConfirm"></u-picker>
			<!--提交按钮-->
			<view class="f-fixed u-padding-20">
				<u-button @click="save" shape="circle" type="primary" :custom-style="customStyle">发布</u-button>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import Config from '../../../common/js/config.js'
	export default {
		data() {
			return {
				action: 'https://qq.cdbendi.com/' + 'social/api/topic/topicimage',
				formData: {},
				cateList: [],
				show: false,
				model: {
					cate_name: '',
					description: '',
					topic_name: '',
					cate_id: '',
					cover_image: []
				},
				customStyle: {
					backgroundColor: '#262239'
				},
				imgList: [],
				memberId: '',

			}
		},
		onLoad() {
			//上传图片所需参数
			this.formData = {
				token: uni.getStorageSync('token'),
				app_type: 'weapp',
				app_type_name: '微信小程序',
				site_id: Config.siteId
			}
			console.log(this.formData)
			this.getGroup();
			this.getUserInfo();
		},
		methods: {
			//获取圈子分类
			getGroup() {
				this.showEmpty = false;
				this.$api.sendRequest({
					url: '/social/api/topic/cate',
					success: res => {
						this.showEmpty = true;
						if (res.code == 0) {
							if (res.data.length != 0) {
								this.cateList = res.data;
							}
						} else {
							this.$util.showToast({
								title: res.message
							});
						}
					},
					fail: res => {
						mescroll.endErr();
						if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
					}
				});
			},
			//发布圈子
			save() {
				let data = {
					topic_name: this.model.topic_name,
					description: this.model.description,
					cate_id: this.model.cate_id,
					cover_image: this.model.cover_image,
					member_id: this.memberId
				};
				this.$api.sendRequest({
					url: '/social/api/topic/add',
					data: data,
					success: res => {
						if (res.code == 0) {
							this.$util.showToast({
								title: "圈子发布成功"
							});
							setTimeout(() => {
								this.$util.redirectTo('/newpages/social/index', {}, "redirectTo");
							}, 1000);
						} else {
							this.$util.showToast({
								title: res.message
							});
							this.flag = false;
						}
					},
					fail: res => {
						this.flag = false;
					}
				});
			},
			confirm(e) {
				this.model.cate_id = e[0].value;
				this.model.cate_name = e[0].label;
			},

			// 头像图上传成功
			uploadSuccess1(e) {
				this.model.cover_image = [];
				e.forEach(item => {
					this.model.cover_image.push(item.response.data.pic_path);
				});
				console.log(this.images)
			},
			// 移除头像图
			uploadRemove1(index) {
				this.model.cover_image.splice(index, 1);
			},
			//获取用户信息
			getUserInfo() {
				this.$api.sendRequest({
					url: '/api/member/info',
					success: res => {
						if (res.code == 0) {
							//uni.getStorageSync('member_id', res.data.member_id);
							//console.log(res.data.member_id);
							this.memberId = res.data.member_id;
						} else {
							this.$util.showToast({
								title: res.message
							})
						}
					}
				});
			},


		}
	}
</script>

<style lang="scss">
	.container {
		background-color: #FFFFFF;
	}
	.scroll-box {
		height: 100vh !important;
		white-space: nowrap;
	}

	.area-box {
		width: 690rpx;
		min-height: 306rpx;
		background: rgba(249, 250, 251, 1);
		border-radius: 20rpx;
		padding: 20rpx;

		.pl-style {
			font-size: 26rpx;
			font-weight: 500;
			color: rgba(177, 179, 199, 1);
			line-height: 50rpx;
		}

		.inp-area {
			font-size: 26rpx;
			font-weight: 500;
			color: #333;
			line-height: 50rpx;
			width: 100%;
		}

		.img-box {
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			margin-top: 20rpx;

		}
	}

	.post-txt {
		width: 100%;
		padding: 20rpx 0;
		min-height: 300rpx;

	}

	.choose-item {
		display: flex;
		align-items: center;
		padding: 20rpx;
		border-bottom: 1px solid #F5F5F5;

		&:last-child {
			border: 0;
		}

		.txt {
			margin-left: 20rpx;
		}

		.icon {
			width: 40rpx;
			height: 40rpx;
		}

		.u-icon {
			margin-left: auto;
			color: #999;
		}
	}
</style>
